<template>
  <div>
    <account-card title="添加账号">
      <el-form label-width="100px" size="small">
        <el-form-item label="账号">
          <el-input placeholder="请输入账号" v-model="loginForm.account" clearable></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label-width="100px" label="密码">
          <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
        </el-form-item>
        <!-- 下拉框 -->
        <el-form-item label="用户组">
          <el-select v-model="loginForm.userGroup">
            <el-option value="普通管理员"></el-option>
            <el-option value="超级管理员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled='dis' @click="Adduser">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </account-card>
  </div>
</template>

<script>
import { AddUser } from "@/apis/users.js";

import AccountCard from "../../../components/accountcard/AccountCard.vue";
export default {
  components: {
    AccountCard,
  },
  data() {
    return {
      dis:false,
      loginForm: {
        account: "",
        password: "",
        userGroup: "",
      },
    };
  },
  methods: {
    Adduser() {
      this.dis=true
      setTimeout(() => {
        this.dis=false
      }, 2000);
      AddUser(this.loginForm).then((res) => {
        if (res.data.code === 0) {
          this.$message({
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message.error("添加失败");
        }
      }).catch(err=>{
        console.log(err);
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {
  width: 250px;
}
</style>